<template>
	<view class="record-box-now">
		<navBar title="现场情况记录" @goBack="uni.navigateBack()"></navBar>

		<view class="space-box"></view>
		<view class="fill-report">
			<view class="form">
				<view class="form-item">
					<view class="label" :class="{'required':!fillForm.disabled}">巡视时间</view>
					<view @click="openSelectPicker(1)" class="form-content">
						<view class="form-text" style="max-width: 336upx;" v-if="fillForm.inspectorTime">{{fillForm.inspectorTime || ''}}</view>
						<view class="form-text" v-else style="opacity: .4;">请选择时间</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16" v-if="!fillForm.disabled"></u-icon>
					</view>
				</view>
				<view  class="form-item">
					<view class="label" :class="{'required':!fillForm.disabled}">现场情况</view>
					<view class="form-content" @click="openSelectPicker(2)">
						<view class="form-text" v-if="fillForm.siteState">{{ fillForm.siteState }}</view>
						<view class="form-text" v-else style="opacity: .4;">请选择状态</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16" v-if="!fillForm.disabled"></u-icon>
					</view>
				</view>
				<u-picker :immediateChange="true" :show="showSituation" :columns="condition" keyName="name" @confirm="confirmBtn($event,'situation')" @cancel="cancelBtn('situation')"></u-picker>

				<view class="form-item">
					<view class="label" :class="{'required':!fillForm.disabled}" style="width: 260rpx;">当前深度</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.currentDeep" type="digit" placeholder="请输入数字"
							border="none" />
						<text>米</text>
					</view>
				</view>
				<view class="tips-title">前台</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">地内压力</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.subsurfacePressure" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">MPa</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">阀门</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.doorWay" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">mm</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">回浆是否正常</view>
					<view class="form-content" @click="openSelectPicker(3)">
						<view class="form-text" v-if="fillForm.overfallState">{{ fillForm.overfallState }}</view>
						<view class="form-text" v-else style="opacity: .4;">{{ fillForm.disabled ? '' : '请选择状态' }}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16" v-if="!fillForm.disabled"></u-icon>
					</view>
				</view>
				<u-picker :immediateChange="true" :show="showBackfilling" :columns="backfillingList" keyName="label" @confirm="confirmBtn($event,'back')" @cancel="cancelBtn('back')"></u-picker>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">孔口是否冒浆</view>
					<view class="form-content" @click="openSelectPicker(4)">
						<view class="form-text" v-if="fillForm.orificesState">{{ fillForm.orificesState }}</view>
						<view class="form-text" v-else style="opacity: .4;">{{ fillForm.disabled ? '' : '请选择状态' }}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16" v-if="!fillForm.disabled"></u-icon>
					</view>
				</view>
				<u-picker :immediateChange="true" :show="showOrifice" :columns="orificeList" keyName="label" @confirm="confirmBtn($event,'orifice')" @cancel="cancelBtn('orifice')"></u-picker>
				<view class="tips-title">后台</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">1#浆压力</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.pressureOne" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">MPa</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">1#浆流量</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.flowOne" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">L/min</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">2#水压力</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.pressureTwo" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">MPa</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">2#水流量</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.flowTwo" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">L/min</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">1#气压力</view>
					<view class="form-content">
						<u--input inputAlign="right"  :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.pressureForce" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">MPa</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">1#气流量</view>
					<view class="form-content">
						<u--input inputAlign="right"  :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.gasFlowOne" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">Nm³/min</text>
					</view>
				</view>
				<view class="form-item">
					<view class="label" style="width: 260rpx;">2#气流量</view>
					<view class="form-content">
						<u--input inputAlign="right"  :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.gasFlowTwo" type="digit" :placeholder="fillForm.disabled ? '' : '请输入数字'"
							border="none" />
						<text v-if="!fillForm.disabled">Nm³/min</text>
					</view>
				</view>
				<view class="tips-title" style="height: 40rpx;"></view>
				<view class="form-item">
					<view class="label" :class="{'required':!fillForm.disabled}" style="width: 260rpx;">单桩工作量/m³</view>
					<view class="form-content">
						<u--input inputAlign="right"  :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.singlePileWorkload" type="digit" placeholder="请输入数字"
							border="none" />
					</view>
				</view>
				<view class="form-item">
					<view class="label" :class="{'required':!fillForm.disabled}" style="width: 260rpx;">每桩-水灰比</view>
					<view class="form-content">
						<u--input inputAlign="right"  :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.waterCementRatio" type="digit" placeholder="请输入数字"
							border="none" />
					</view>
				</view>
				<view class="form-item">
					<view class="label" :class="{'required':!fillForm.disabled}" style="width: 260rpx;">每桩-泥浆比重</view>
					<view class="form-content">
						<u--input inputAlign="right" :disabled="fillForm.disabled" disabledColor="#fff" v-model="fillForm.mudWeight" type="digit" placeholder="请输入数字"
							border="none" />
					</view>
				</view>
				<view class="form-item" style="border-bottom: none;margin-top: 60rpx;">
					<view class="label" :class="{'required':!fillForm.disabled}">巡视人签名</view>
				</view>
				<commonLookImage :imageArr="siteBuilderNameAttach" v-if="fillForm.disabled"></commonLookImage>
				<signature :footerShow="true" canvasId="canvas1" @savePath="getName1" @clearPath="clearName" :imagePath="imagePath" ref="signRef" v-else></signature>
				<u-datetime-picker @confirm="confirmBuildEndDate" @cancel="buildEndDatePicker = false" v-model="timeVal"
					:show="buildEndDatePicker" :formatter="dateFormatter" 
					mode="datetime" />
			</view>

			<view class="footer-button" v-if="!fillForm.disabled">
				<view class="button-placeholder"></view>
				<view class="button-group">
					<button @click="$u.throttle(clickSubmit,1000)" :loading="isLoading" class="button-primary" style="margin: 0 20rpx;">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import {getSystemHeightInfo,isPositiveInteger,imgFun,getFormCheckResult} from "@/utils/common.js";
	import {handleFormatDate,compareDate} from "@/utils/date.js";
	import fileMixin from "@/mixins/file.js";
	import mixins from "@/utils/mixins.js"
	import {constructionPlan_save} from "@/api/engineeringMaintenance/engineeringMaintenance.js";
	import signature from "@/subpackage-mjs/pages/comoponents/signature.vue";
	import {uploadFile} from '@/utils/request'
	import { getPicture, deleteImg, doc_deleteAttachs } from '@/api/doc.js'
	import { mjsProject_list } from "@/api/mjs.js"
	export default {
		name: "add-task",
		mixins: [fileMixin, mixins],
		props: {},
		components: {
			signature
		},
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				timeVal: Number(new Date()),
				// 填报表单
				fillForm: {},
				// 施工结束时间日期弹框显示状态
				buildStartDatePicker: false,
				buildEndDatePicker: false,
				// 是否在加载中
				isLoading: false,
				location: undefined,
				checkListImg: [],
				showBackfilling:false,
				backfillingList:[[
					{label:'正常',id:0},{label:'不正常',id:1},
				]],
				showOrifice:false,
				orificeList:[[
					{label:'是',id:0},{label:'否',id:1},
				]],
				showSituation:false,
				condition:[],
				siteBuilderNameAttach: [],
				imagePath:'',
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		onLoad(params) {
			this.projectPbId = params.projectPbId
		},
		mounted() {
			this.initContainerData();
			if(uni.getStorageSync('recordInfo')) {
				let tempObj = uni.getStorageSync('recordInfo')
				this.fillForm.singlePileWorkload = tempObj.singlePileWorkload
				this.fillForm.waterCementRatio = tempObj.waterCementRatio
				this.fillForm.mudWeight = tempObj.mudWeight
			}
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendDataList',async (item) => {
				console.log(item.data, 'sendDataList')
				this.fillForm = {...item.data}
				if(this.fillForm.overfallState == 0 || this.fillForm.overfallState == '正常') {
					this.fillForm.overfallState = '正常'
				}else if(this.fillForm.overfallState == 1 || this.fillForm.overfallState == '不正常'){
					this.fillForm.overfallState = '不正常'
				}
				if(this.fillForm.orificesState == 0 || this.fillForm.orificesState == '是') {
					this.fillForm.orificesState = '是'
				}else if(this.fillForm.orificesState == 1 || this.fillForm.orificesState == '否'){
					this.fillForm.orificesState = '否'
				}
				if(item.data.inspectorName) {
					this.siteBuilderNameAttach = await this.getItemImage(item.data.inspectorName)
					this.imagePath = this.siteBuilderNameAttach.map(i => i.url).join(',')
					console.log(this.imagePath)
				}

			})
			this.eventChannel = eventChannel
			this.condition =  [this.$store.getters.dictMap['field_situation']]
			// console.log(this.condition,'this.condition')
		},
		methods: {
			confirmBtn(val, type) {
				console.log(val, 'type')
				if(type === 'situation') {
					this.fillForm.siteState = val.value[0].name
					this.showSituation = false
				}else if(type === 'back') {
					this.fillForm.overfallState = val.value[0].label
					this.showBackfilling = false
				}else if(type === 'orifice') {
					this.fillForm.orificesState = val.value[0].label
					this.showOrifice = false
				}
			},
			cancelBtn(type) {
				if(type === 'situation') {
					this.fillForm.siteState = ''
					this.showSituation = false
				}else if(type === 'back') {
					this.fillForm.overfallState = ''
					this.showBackfilling = false
				}else if(type === 'orifice') {
					this.fillForm.orificesState = ''
					this.showOrifice = false
				}
			},
			async getItemImage(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({
						docId
					}).then(res => {
						resolve(res.result.map(it => ({
							url: this.$config.IMG_FILE_URL + it.fileName,
							id: it.id
						})) || []);
					}).catch(err => reject(err))
				})
			},
			async getName1(obj) {
				console.log(obj, 'obj--00')
				this.tempPath = obj.tempFilePath
			},
			clearName() {
				console.log('清除')
				if (!this.deleteFileList) {
					this.deleteFileList = new Set()
				}
				if (this.fillForm.inspectorName) {
					this.deleteFileList.add(this.fillForm.inspectorName)
				}
				this.imagePath = ''
				this.$refs.signRef.isDrawing = false
			},
			async deleteFileBeforeSaving() {
				// 删除文件...
				if (this.deleteFileList) {
					await Promise.all([...this.deleteFileList].map(item => this.removeFileById(item)))
					this.deleteFileList = null
				}
			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 70;
			},
			getTmepFilePath(path) {
				return new Promise(async resolve => {
					uni.compressImage({
						src:path,
						quality: 80,
						success: async res => {
							let data = await uploadFile({
								url: "rest/doc/uploadDoc",
								formData:{},
								filePath:res.tempFilePath
							})
							resolve(JSON.parse(data))
						},
						fail: err => {
							resolve({})
						}
					 })
				})
			
			},
			getName(arr,name) {
				let code = ''
				if (arr && arr.length > 0) {
					code = arr.find(it => it.name == name) ? arr.find(it => it.name == name).code : ''
				}
				return code
			},

			/** 点击提交按钮 */
			async clickSubmit() {
				if(!this.fillForm.inspectorTime) return this.$message('请选择时间！')
				if(!this.fillForm.siteState) return this.$message('请选择现场情况！')
				if(!this.fillForm.currentDeep) return this.$message('请输入当前深度！')
				if(!this.fillForm.singlePileWorkload) return this.$message('请选择单桩工作量！')
				if(!this.fillForm.waterCementRatio) return this.$message('请选择每桩-水灰比！')
				if(!this.fillForm.mudWeight) return this.$message('请选择每桩-泥浆比重！')
				if(this.$refs.signRef && !this.$refs.signRef.isDrawing && !this.imagePath) return this.$message('请签名！')
				if(this.$refs.signRef && this.$refs.signRef.isDrawing) {
					let resp= await  this.$refs.signRef.finish()
					let temp =  await this.getTmepFilePath(resp)
					if(temp) {
						this.fillForm.inspectorName = temp.result.id
					}
				}
				this.fillForm.createUserName = this.$store.getters.userName.name
				if(this.fillForm.orificesState) {
					this.fillForm.orificesState = this.fillForm.orificesState === '是' ? 0 : 1 
				}
				if(this.fillForm.overfallState) {
					this.fillForm.overfallState = this.fillForm.overfallState === '正常' ? 0 : 1 
				}
				// this.fillForm.siteState = this.getName(this.$store.getters.dictMap['field_situation'], this.fillForm.siteState)
				uni.setStorageSync('recordInfo', {
					singlePileWorkload:this.fillForm.singlePileWorkload,
					waterCementRatio:this.fillForm.waterCementRatio,
					mudWeight:this.fillForm.mudWeight,
					pbId:this.projectPbId
				})
				if(this.isLoading) return
				this.isLoading = true
				await this.deleteFileBeforeSaving()
				uni.navigateBack({
					delta:1,
					success:() => {
						uni.$emit('sendFormInfo', {...this.fillForm})
						this.isLoading = false
					}
				})
			},
			confirmBuildEndDate(event) {
				this.fillForm.inspectorTime = handleFormatDate(event.value, 3)
				this.buildEndDatePicker = false;
			},

			/** 日期选择格式化 */
			dateFormatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				} else if (type === 'month') {
					return `${value}月`
				} else if (type === 'day') {
					return `${value}日`
				} else if (type === 'hour') {
					return `${value}时`
				} else if (type === 'minute') {
					return `${value}分`
				}
				return value;
			},
			/**
			 * @param {Number} num
			 */
			openSelectPicker(num) {
				if(this.fillForm.disabled) return
				if(num === 1) {
					this.buildEndDatePicker = true
				}else if(num === 2) {
					this.showSituation = true
				}else if(num === 3) {
					this.showBackfilling = true
				}else if(num === 4) {
					this.showOrifice = true
				}
			} 
		}
	}
</script>

<style scoped lang="scss">
	.record-box-now {
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
	}
	.fill-report {
		.form {
			background: #fff;
			padding-top: 26upx;

			.tips-title {
				height: 100rpx;
				background: #F5F7FA;
				color: #22204E;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 100rpx;
				padding-left: 30rpx;

			}

			.form-item {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30upx;
				border-bottom: 1px solid #e2e5ed;

				&:last-of-type {
					border-bottom: none;
				}

				.label {
					color: #445469;
					line-height: 44upx;
					flex-shrink: 0;
				}

				.form-content {
					color: #22204e;
					display: flex;
					align-items: center;
				}

				.form-text {
					line-height: 58upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 302upx;
				}

				.form-text.none {
					opacity: .7;
					font-size: 30rpx;
				}

				.u-icon {
					margin-left: 40upx;
				}

				.uicon-close-circle-fill {
					margin-left: 32upx;
				}

				.u-input {
					width: 340upx;
					text-align: right;

					::v-deep .u-input__content__field-wrapper {
						margin-right: 24upx;
					}

					::v-deep .uni-input-wrapper {
						text-align: right;
					}
				}

				.u-switch {
					margin-right: 30upx;
				}
			}

			.no-inline {
				display: block;
				height: auto;

				.label {
					line-height: 100upx;
				}
			}
		}


	}

	.fill-report.mar-t {
		padding-top: 26upx;
	}

	.footer-button {
		height: 154upx;

		.button-placeholder {
			height: 100%;
		}

		.button-group {
			height: 154upx;
			padding: 30upx;
			box-sizing: border-box;
			background: #fff;
			position: fixed;
			width: 100vw;
			bottom: 0;
			z-index: 99;

			.button-primary {
				background: #2f80ed;
				border-radius: 4upx;
				color: #fff;
				font-weight: bold;
				line-height: 92upx;
				text-align: center;
			}

		}
	}

	.required {
		&::before {
			content: "*";
			color: #ff6a6a;
		}
	}

	.space-box {
		background-color: #f5f7fb;
		height: 40rpx;
	}
</style>